<a (click)="edit()">
  <i nz-icon nzType="plus"></i>
  添加
</a>

<nz-row [nzGutter]="[8,8]" cdkDropList (cdkDropListDropped)="drop($event)">
  <div nz-col [nzSpan]="12" [nzXs]="24" [nzSm]="12" [nzMd]="12" [nzLg]="8" [nzXl]="6" [nzXXl]="4"
       *ngFor="let data of items; let i=index" cdkDrag>
    <nz-card nzSize="small" nzHoverable
             [nzTitle]="data.name" [nzExtra]="extraTemplate" (click)="edit(data)">
      <p>
        地址：{{data.code}}{{data.address}}，名称：{{data.label}}
        <span *ngIf="data.unit">单位：{{data.unit}}</span>
      </p>
      <p>
        类型：{{data.type}}，
        <span *ngIf="data.le">小端模式，</span>
        <span *ngIf="data.precision">{{data.precision}}个小数位，</span>
        <span *ngIf="data.store">保存历史</span>
      </p>
    </nz-card>
    <ng-template #extraTemplate>
      <a title="移动" cdkDragHandle>
        <i nz-icon nzType="drag" nzTheme="outline"></i>
      </a>
      <nz-divider nzType="vertical"></nz-divider>
      <a title="复制" (click)="copy(i); $event.stopPropagation()">
        <i nz-icon nzType="copy" nzTheme="outline"></i>
      </a>
      <nz-divider nzType="vertical"></nz-divider>
      <a title="删除" nz-popconfirm nzPopconfirmTitle="确定删除?" (nzOnConfirm)="remove(i)" (click)="$event.stopPropagation()">
        <i nz-icon nzType="delete" nzTheme="outline"></i>
      </a>
    </ng-template>
  </div>
</nz-row>

<nz-modal [(nzVisible)]="showModal" nzTitle="编辑数据点" (nzOnOk)="onOk()" (nzOnCancel)="showModal=false">
  <ng-container *nzModalContent>
    <form [formGroup]="formGroup">
      <nz-form-item>
        <nz-form-label [nzSpan]="5">变量</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <input nz-input formControlName="name" required/>
          请使用英文或拼音
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">名称</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <input nz-input formControlName="label" required/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">单位</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <input nz-input formControlName="unit" required/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">代码</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <nz-select formControlName="code" nzSize="small" required>
            <nz-option [nzValue]="code.name" [nzLabel]="code.name + ' ' + code.label" *ngFor="let code of codes"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">地址</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <input nz-input formControlName="address" nzSize="small"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">类型</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <nz-select formControlName="type" nzSize="small" required>
            <nz-option nzValue="bit" nzLabel="位 bit"></nz-option>
            <nz-option nzValue="byte" nzLabel="字节 byte"></nz-option>
            <nz-option nzValue="word" nzLabel="字 word 2byte"></nz-option>
            <nz-option nzValue="dword" nzLabel="双字 dword 4byte"></nz-option>
            <nz-option nzValue="qword" nzLabel="四字 qword 8byte"></nz-option>
            <nz-option nzValue="short" nzLabel="短整型 short 2byte"></nz-option>
            <nz-option nzValue="int" nzLabel="整型 int 4byte"></nz-option>
            <nz-option nzValue="long" nzLabel="长整型 dint 4byte"></nz-option>
            <nz-option nzValue="float" nzLabel="浮点数 float 4byte"></nz-option>
            <nz-option nzValue="double" nzLabel="双精度 double 8byte"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">小端模式</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <nz-switch formControlName="le" nzSize="small"></nz-switch>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">小数位数</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
<!--          <input nz-input formControlName="precision" nzSize="small"/>-->
          <nz-input-number formControlName="precision" nzSize="small"></nz-input-number>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">保存历史</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <nz-switch formControlName="store" nzSize="small"></nz-switch>
        </nz-form-control>
      </nz-form-item>

    </form>
  </ng-container>
</nz-modal>

